<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>修改学生信息</title>
    <th:block th:replace="~{commons/commons::head}"/>
    <script src="/static/js/vue/vue.min.js"></script><!--vue.js-->
    <script src="/static/js/page.min.js"></script><!--分页组件-->
</head>
<style>
    #submit{
        display: block;
        margin: 0 auto;
    }
    button[type=submit]{
        display: block;
        margin: 0 auto;
    }
    .goBack{
        margin: 20px auto 10px auto;
        text-align: center;
    }
    .form-group{
        margin-bottom: 0.5rem !important;
    }
</style>
<body>

<div th:replace="~{commons/commons::top}"></div>

<div id="app">

    <div class="goBack">
        <a href="/student/goBack" class="btn btn-outline-success">
            返回首页
        </a>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 offset-md-4 col-sm-4 offset-sm-4">
                <form>
                    <div class="form-group">
                        <label for="uid">学生编号</label>
                        <input type="text" class="form-control" id="uid" readonly>
                        <small id="emailHelp" class="form-text text-muted">学生编号，自动生成</small>
                    </div>
                    <div class="form-group">
                        <label for="name">学生姓名</label>
                        <input type="text" class="form-control" id="name" @blur="inspect($event)" v-model="student.name" required>
                    </div>
                    <div class="form-group">
                        <span style="margin-right: 20px">学生性别</span>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" id="boy" name="sex" value="男" v-model="student.sex"  >
                            <label class="custom-control-label" for="boy">男</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" id="girl" name="sex" value="女" v-model="student.sex" >
                            <label class="custom-control-label" for="girl">女</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="qq">学生QQ</label>
                        <input type="text" class="form-control" id="qq" @blur="inspect($event)" v-model="student.qq" required>
                    </div>
                    <div class="form-group">
                        <label for="weixin">学生微信</label>
                        <input type="text" class="form-control" id="weixin" @blur="inspect($event)" v-model="student.weixin" required>
                    </div>
                    <div class="form-group">
                        <label for="yuanxi">学生院系</label>
                        <select class="form-control" id="yuanxi" @blur="inspect($event)" v-model="student.yuanxi" required>
                            <option></option>
                            <option value="教育学院">教育学院</option>
                            <option value="计算机工程学院">计算机工程学院</option>
                            <option value="土木工程与建筑学院">土木工程与建筑学院</option>
                            <option value="机械工程学院">机械工程学院</option>
                            <option value="经济管理学院">经济管理学院</option>
                            <option value="马克思主义学院">马克思主义学院</option>
                            <option value="政法学院">政法学院</option>
                            <option value="体育学院">体育学院</option>
                            <option value="物理学院">物理学院</option>
                            <option value="数学与统计学院">数学与统计学院</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="major">学生专业</label>
                        <input type="text" class="form-control" id="major" @blur="inspect($event)" v-model="student.major" required>
                    </div>
                    <div class="form-group">
                        <label for="beizhu">学生备注</label>
                        <input type="text" class="form-control" id="beizhu" @blur="inspect($event)" v-model="student.beizhu" required>
                    </div>
                    <div class="form-group">
                        <label for="sushe">学生宿舍</label>
                        <input type="text" class="form-control" id="sushe" @blur="inspect($event)" v-model="student.sushe" required>
                    </div>
                    <button type="button" id="submit" class="btn btn-primary" @click="submit">修改</button>
                </form>
            </div>
        </div>
    </div>

</div>

<script th:inline="javascript">
    let vm = new Vue({
        el : '#app',
        data : {
            student : {
                name : '',
                sex : '',
                qq : '',
                weixin : '',
                yuanxi : '',
                major : '',
                beizhu : '',
                sushe : '',
            },
        },
        methods : {
            inspect(event){
                if (event.target.value === ""){
                    event.target.classList.add("is-invalid")
                }else{
                    event.target.classList.remove("is-invalid")
                    event.target.classList.add("is-valid")
                }
            },
            submit(){//添加方法
                console.log(Object.values(this.student))

                if ((Object.keys(this.student).filter(v=>!this.student[v])).length<=0) {
                    console.log("无空值");
                    axios({
                        method : "POST",
                        url:"/student/add/",
                        data: {
                            name : this.student.name,
                            sex : this.student.sex,
                            qq : this.student.qq,
                            weixin : this.student.weixin,
                            yuanxi : this.student.yuanxi,
                            major : this.student.major,
                            beizhu : this.student.beizhu,
                            sushe : this.student.sushe,
                        },
                    }).then((response)=>{
                        if (response.data === true){
                            Qmsg.success("添加成功",{position:'center'});
                        }else{
                            Qmsg.info("添加失败",{position:'center'});
                        }
                    }).catch((error)=> {
                        Qmsg.info("添加失败",{position:'center'});
                    });
                }else{
                    console.log("有空值");
                }

            },
        },
        beforeMount (){//初始化数据
            console.log("页面挂载之前")
            /*消息弹窗全局配置*/
            Qmsg.config({
                showClose:true,
                timeout:2000,
                autoClose:true
            })
        },
        mounted(){
            console.log("页面挂载之后")
        },
    });


</script>
</body>
</html>
